<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <div class="headerleft">
          <img :src="pic1" alt="" />
          <span>Higo后台管理系统</span>
        </div>
        <div class="headerright">
          <el-dropdown>
            <span class="el-dropdown-link">
              <img :src="pic" alt="" />
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="clearRoute">退出</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </el-header>
      
      <el-container>
        
        <el-aside width="200px">
          <el-menu
          active-text-color="#f00"
            background-color="#777"
            class="el-menu-vertical-demo"
            default-active="2"
            text-color="#fff"
            @open="handleOpen"
            @close="handleClose"
            :router="true"
          >
          <template v-for="item in menuData" :key="item.id">
         <el-menu-item v-if="!item.children" :index="item.path">{{ item.label }}</el-menu-item>
            <el-sub-menu v-else :index="item.id">
              <template #title>
                <span>{{ item.label }}</span>
              </template>
              <el-menu-item v-for="sonItem in item.children" :index="sonItem.path"  :key="sonItem.id">
                {{ sonItem.label }}
              </el-menu-item>
            </el-sub-menu>
          </template>
          </el-menu>
        </el-aside>
        <el-main style="overflow: visible;">
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script lang="ts" setup>
import pic from "../../assets/icon.png";
import pic1 from "../../assets/logo.png";
import {
  Document,
  Menu as IconMenu,
  PictureFilled,
  Avatar,
  Platform,
} from "@element-plus/icons-vue";
import { reactive } from "vue";
// 用户头像


import curMenu from '../../permessions/menu'
import getRoutes,{clearRoutes} from '../../permessions/route'
import {useRouter} from "vue-router"
import {useStore} from 'vuex'
const menuData =reactive(curMenu())
const $store =useStore()
// 判断vuex中定义的数据的布尔值、当数据为flase时才动态添加路由
if(!$store.state.count){
  getRoutes()
}
const username =sessionStorage.getItem('userInfo')
const $router =useRouter()
// 清除路由、清除本地存储
const clearRoute=()=>{
  sessionStorage.clear()
  clearRoutes()
  $store.commit('increment',false)
  $router.push('/Login')
}
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
</script>

<style lang="scss" scoped>
.common-layout {
  width: 100%;
  height: 100%;
}

.el-container {
  width: 100%;
  height: 100%;
}

.el-aside {
  width: 200px;
  height: 100%;
  background-color: #dae5f5;
}

.el-header {
  width: 100%;
  height: 80px;
  line-height: 80px;
  background: linear-gradient(to right bottom,#fff,#000000);
  padding-left: 0;
  color: rgb(151, 4, 4);
  display: flex;
  justify-content: space-between;
  align-items: center;
  .headerleft {
    width: 400px;
    display: flex;
    // text-align: right;
    margin-left: 10px;
    align-items: center;
    img {
      width: 20%;
    }
    span {
      font-weight: bolder;
      display: inline-block;
      width: 200px;
      font-size: 22px;
      margin-left: 20px;
    }
  }
  .headerright {
    text-align: center;
    margin-right: 200px;
    img {
      width: 40px;
      height: 40px;
      line-height: 80px;
      border-radius: 50%;
      margin-top: 16px;
      border: none;
    }
  }
}
.el-dropdown{
  border: none;
}
</style>